<template>
  <div>
    <div id="heihei">{{ a }}</div>
    <button @click="add">+1</button>
    <child />
  </div>
</template>

<script>
import Child from './生命周期子组件.vue';

let timer = null;

function onKeyUp () {
  console.log('heihei');
}

export default {
  components: {
    Child,
  },
  data () {
    return {
      a: 1,
    };
  },
  methods: {
    // 数据更新前
    beforeDataUpdate () {
      console.log('数据更新前', this.a);
    },
    // 数据更新后
    dataUpdated () {
      console.log('数据更新后', this.a);
    },
    add () {
      this.beforeDataUpdate();
      this.a++;
      this.dataUpdated();
    },
  },
  // 创建前
  beforeCreate () {
    console.log('创建前', this.a);
  },
  // 创建后 (最常用)
  created () {
    console.log('创建后', this.a);
    // timer = setInterval(() => {
    //   console.log('xixi');
    // }, 1000)
    window.addEventListener('keyup', onKeyUp);
  },
  // 挂载前
  beforeMount () {
    console.log('挂载前', document.querySelector('#heihei'));
  },
  // 挂载后 (常用)
  mounted () {
    console.log('挂载后', document.querySelector('#heihei'));
    console.log(document.querySelector('#b'))
  },
  // DOM 更新前
  beforeUpdate () {
    console.log('更新前', document.querySelector('#heihei').innerText);
  },
  // DOM 更新后
  updated () {
    console.log('更新后', document.querySelector('#heihei').innerText);
  },
  // 实例销毁前 (常用)
  beforeDestroy () {
    console.log('实例销毁前', document.querySelector('#b'));
    window.removeEventListener('keyup', onKeyUp);
  },
  // 实例销毁后
  destroyed () {
    console.log('实例销毁后', document.querySelector('#b'));
  },
}
</script>

<style scoped>

</style>
